<template>
  <SnelPage :config="pageConfig" :sign="currentComponent" ref="page">
    <!-- S pagebg -->
    <div class="pagebg">
      <div class="pic"><img src="../assets/t/images/bg/y-bg00.jpg" width="1920" height="1080" /></div>
    </div>
    <!-- E pagebg -->
    <!-- S content -->
    <div class="wrapper">
      <div class="scrollBox" ref="wrapper">
        <div class="y-coverTop" v-show="mask"><!--顶部遮罩层--></div>
        <!-- S head -->
        <!-- btn -->
        <SnelArea class="y-headBtn01" :config="area0Config">
          <div class="item">
            <div class="icon icon01"></div>
            <div class="txt">搜索</div>
          </div>
          <div class="item">
            <div class="icon icon02"></div>
            <div class="txt">我的</div>
          </div>
          <div class="item">
            <div class="icon icon03"></div>
            <div class="txt">记录</div>
          </div>
          <div class="item">
            <div class="icon icon04"></div>
            <div class="txt">投屏</div>
          </div>
        </SnelArea>
        <!-- time -->
        <div class="time">{{ systemTime }}</div>
        <!-- logo -->
        <div class="logo">
          <img src="../assets/t/images/y-logo.png" width="262" height="53" alt="" />
        </div>
        <!-- E head -->
        <!-- S menu -->
        <div class="y-menu">
          <SnelArea class="scrollBox" :config="area1Config">
            <div class="item">
              <div class="txt"><span>频道</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>推荐</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>全球通剧场</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>专区</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>电视剧</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>电影</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>少儿</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>综艺</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>纪实</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>教育</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>动画</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>更多</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>更多更多</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>更多更多更多</span></div>
            </div>
            <div class="item">
              <div class="txt"><span>更多</span></div>
            </div>
          </SnelArea>
        </div>
        <!-- E menu -->
        <!-- S 滑屏 inedx -->
        <div class="y-indexContent">
          <div class="scrollBox" id="container">
            <component v-for="(nav, i) in navs" :key="nav" :is="nav" :sign="nav" :style="{ left: `${1920 * i}px` }" />
          </div>
        </div>
      </div>
    </div>
    <!-- E content -->
  </SnelPage>
</template>

<script>
import '@/assets/t/css/reset.css';
import '@/assets/t/css/style.css';
import Home from '@/examples/Home.vue';
import Channel from '@/examples/Channel.vue';
import { getFormatDateString, loop } from '@/scripts/tools';
import extentDOM from '@/scripts/helpers/extentDOM';
import { DIR } from '@/scripts/constant';

export default {
  name: 'Abord',
  components: {
    Home,
    Channel,
  },
  computed: {
    currentComponent() {
      return this.components[this.selected];
    },
  },
  data() {
    // 子组件页面集合
    this.components = ['Channel', 'Home'];
    return {
      systemTime: getFormatDateString('hh:mm'),
      selected: 0,
      mask: false,
      navs: [],
      /** @type {SnelPage} */
      pageConfig: {
        bannedMarquee: [0, 1],
        borderShake: {
          banned: [0, 1],
        },
        slide: {
          containerId: 'container',
          bottom: -50,
          condition: (_, val) => {
            this.mask = val < 0;
            extentDOM(this.$refs.wrapper).slide(this.mask ? -100 : 0, 'v');
            return true;
          },
          slideFree: true,
        },
        screen: {
          slideDir: 'h',
          dependId: 1,
        },
        keyNumber(page, num) {
          console.log('num: ', num);
        },
        keyOk(page) {
          console.log('id: ', page.currentAreaId);
          console.log('index: ', page.currentIndex);
        },
        keyBack(page) {
          page.changeFocus(1);
        },
        getKeyCode(page, code) {
          // console.log('code: ', code);
        },
        focusListener: (page, { id, currentIndex }) => {
          // console.log('id, currentIndex: ', id, currentIndex);
        },
        borderListener: (page, direction) => {
          if (!page.focusArea.config.bannedShake && !page.config.borderShake.banned.includes(page.currentAreaId)) {
            this.changeScreen(page, direction);
            page.init(2, 0);
          }
        },
      },
      /** @type {SnelArea} */
      area0Config: {
        // colCount: 4,
        cycleH: true,
        outMoveDir: [-1, -1, 1, -1],
        // keyOk(area) {
        //   console.log('area: ', area.recordIndex);
        // },
        // customLeft(index) {
        //   console.log('index: ', index);
        // },
        // borderUp(index) {
        //   console.log('index: ', index);
        // },
        // areaIn(index, from, fromIndex) {
        //   console.log('index, from, fromIndex: ', index, from, fromIndex);
        // },
        // areaOut(index, to, toIndex) {
        //   console.log('index, to, toIndex: ', index, to, toIndex);
        // },
        // focusBefore(index) {
        //   console.log('index: ', index);
        // },
        // focusAfter(index) {
        //   console.log('index: ', index);
        // },
      },
      /** @type {SnelArea} */
      area1Config: {
        // colCount: 15,
        record: true,
        initRecord: this.selected,
        select: true,
        cycleH: true,
        // outMoveDir: [0, -1, 2, -1],
        // selectInside: true,
        slide: {
          slideDir: 'h',
          startIndex: 6,
        },
        customLeft: ({ page }) => {
          this.changeScreen(page, DIR.LEFT);
          page.init();
          return true;
        },
        customRight: ({ page }) => {
          this.changeScreen(page, DIR.RIGHT);
          page.init();
          return true;
        },
        // focusAfter: (area) => {
        //   const index = area.currentIndex;
        //   if (this.selected !== index) {
        //     this.selected = index;
        //     area.config.initRecord = index;
        //     this.currentComponent && !this.navs.includes(this.currentComponent) && this.navs.push(this.currentComponent);
        //     const page = area.page;
        //     page.init();
        //     page.slideContainer.slide(-1920 * index, 'h', page.firstLoad && 0);
        //   }
        // },

        blurBefore: ({ currentIndex }) => {
          console.log('currentIndex: ', currentIndex);
        },
        blurAfter: ({ currentIndex }) => {
          console.log('currentIndex: ', currentIndex);
        },
      },
    };
  },
  methods: {
    changeScreen(page, direction) {
      const index = direction === 'left' ? page.prevScreen() : page.nextScreen();
      this.selected = index;
      page.areas[1].config.initRecord = index;
      this.currentComponent && !this.navs.includes(this.currentComponent) && this.navs.push(this.currentComponent);
    },
  },
  mounted() {
    loop(() => {
      this.systemTime = getFormatDateString('hh:mm');
    });
    this.navs.push(this.currentComponent);
    this.$refs.page.init(1);
  },
};
</script>
